let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
let UglifyJsPlugin = require("uglifyjs-webpack-plugin")
module.exports = {
  optimization:{//优化项
  //  minimizer:[
  //   new UglifyJsPlugin({ //js优化
  //     cache: true,   // 是否缓存
  //     parallel: true,   // 是否并发
  //     sourceMap: true // 源码映射 set to true if you want JS source maps
  //    }),
  //    new OptimizeCSSAssetsPlugin({})  //css优化
  //  ] 
  },
  devServer:{ //开发服务器配置
   port: 8081, //端口号
   progress: true,//记录条
   contentBase:'./build', //启动指向build目录
   compress: true //压缩
  },
  mode: 'development', // 模式 默认 production development
  entry: './src/index', // 入口
  output: {
    filename: 'bundle.[hash:8].js',
    path: path.resolve(__dirname,'build')
  },
  plugins:[ //数组 放着所有的webpack插件
    new HtmlWebpackPlugin({
      template:'./src/index.html',//模板文件
      filename:'index.html',//打包后生成的文件
      minify:{//对打包的html模板进行压缩
        removeAttributeQuotes: true,//删除属性的双引号
        collapseWhitespace: true //折叠空行变一行
      },
      hash: true
    }),
    new MiniCssExtractPlugin({
      filename:'main.css'
    })
  ],
  module:{ //模块
    rules:[//规则
              {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env'
                        ],
                        plugins:[
                            ["@babel/plugin-proposal-decorators", { "legacy": true }],
                            ["@babel/plugin-proposal-class-properties", { "loose" : true }]
                        ]
                    }
                }
            },
            // style-loader 把css插入head标签中
            // loader 功能单一
            // 多个loader 需要 []
            // 顺便默认从右到左 从下到上执行
            // 也可以写成对象方式
            {
              test: /\.css$/, //css处理
              use:[
                // {
                //   loader:'style-loader',
                //   options:{
                //    insertAt: 'top'// 将css标签插入最顶头  这样可以自定义style不被覆盖
                //   }
                // },
                MiniCssExtractPlugin.loader,
                'css-loader',// 负责解析@import
                'postcss-loader'
              ]
            },
            {
              test: /\.less$/, //less处理
              use:[
                // {
                //   loader:'style-loader',
                //   options:{
                //    insertAt: 'top'// 将css标签插入最顶头  这样可以自定义style不被覆盖
                //   }
                // }
                MiniCssExtractPlugin.loader,
                'css-loader',// 负责解析@import
                'postcss-loader',
                'less-loader'
              ]
            }
    ]
  }
}